<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { NConfigProvider, darkTheme } from 'naive-ui';
import { useAppStore } from './store/modules/app';
import { useThemeStore } from './store/modules/theme';
import { naiveDateLocales, naiveLocales } from './locales/naive';

defineOptions({
  name: 'App'
});

const appStore = useAppStore();
const themeStore = useThemeStore();

const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));

const naiveLocale = computed(() => {
  return naiveLocales[appStore.locale];
});

const naiveDateLocale = computed(() => {
  return naiveDateLocales[appStore.locale];
});

const { VITE_IS_PROD_SERVICE } = import.meta.env;

// 是否是正式环境
const isProdEnv = computed(() => JSON.parse(VITE_IS_PROD_SERVICE));

onMounted(() => {
  // 根据宽度适配屏幕大小
  document.body.style.zoom = String(window.screen.width / 1920);

  if (import.meta.env.PROD) {
    // 防止恶意调试代码
    // (() => {
    //   function block() {
    //     if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
    //       document.body.innerHTML = '检测到非法调试,请关闭后刷新重试!';
    //     }
    //     setInterval(() => {
    //       (function () {
    //         return false;
    //       }
    //         ['constructor']('debugger')
    //         ['call']());
    //     }, 50);
    //   }
    //   try {
    //     block();
    //   } catch (err) {}
    // })();
  }
});
</script>

<template>
  <NConfigProvider
    class="h-full"
    :theme="naiveDarkTheme"
    :theme-overrides="themeStore.naiveTheme"
    :locale="naiveLocale"
    :date-locale="naiveDateLocale"
  >
    <AppProvider>
      <div v-if="!isProdEnv" class="tag-title">测试环境</div>
      <RouterView class="bg-layout" />
    </AppProvider>
  </NConfigProvider>
</template>

<style scoped lang="scss">
.tag-title {
  position: fixed;
  top: 0;
  left: 350px;
  font-size: 45px;
  color: red;
  line-height: 60px;
  z-index: 1000;
}
</style>
